<template>
    <div class="CreateGroupChatView">
        <FriendList @emitResult="pushResult" />
        <!-- 底部按钮 -->
        <div class="bottom">
            <van-button type="primary"
                :disabled="!this.result.length"
                @click="handleCreateGroupChat"
                >完成{{ number }}</van-button>
        </div>
    </div>
</template>

<script>
    import { Toast } from "vant";
    import { mapActions, mapMutations, mapState } from "vuex";

    export default {
        name: "CreateGroupChatView",
        data() {
            return {
                result: [],             // 输入框头像数组
                activeSearch: false,    // 搜索框是否被点击
            };
        },
        components: {
            FriendList: () => import("@/components/createGroupChat/friendList.vue"),
        },
        computed: {
            ...mapState(["user"]),
            number() {              // 底部按钮显示当前选中了多少人
                return this.result.length ? "(" + this.result.length + ")" : "";
            },
        },
        methods: {
            ...mapActions('createGroupChat', ['createGroupChat']),
            ...mapActions('login', ['getGroupChats', 'connectToGroupChats']),
            ...mapMutations(['upGroupChats']),
            pushResult(value) {       // 选中的好友
                let index = this.result.findIndex(item => item.phone == value.phone)

                if (index == -1) {
                    this.result.push(value);
                } else {
                    this.result.splice(index, 1);
                }
            }, 
            async handleCreateGroupChat() {     // 点击按钮完成创建群聊请求
                let members = this.result.map(item => item._id);
                members.push(this.user._id);

                let groupName = this.result.map(item => item.nickname).slice(0, 3).join('、');
                groupName += ('、' + this.user.nickname);
                (this.result.length > 3) && (groupName += '等...');

                let data = {
                    groupName,
                    owner: this.user._id, 
                    members,
                };

                let res = await this.createGroupChat(data);
                if (res.status_code != 200) {
                    return;
                }

                let res_groupChats = await this.getGroupChats(this.user.phone);
                if (res_groupChats.status_code != 200)
                {
                    Toast.fail(`status: ${ res_groupChats.status_code }, err: ${ res_groupChats.data }`);
                    return;
                }
                this.upGroupChats(res_groupChats.data);
                this.$router.back(-1);
                this.connectToGroupChats(this.user.phone);
            },
        },
    };
</script>

<style lang="less" scoped>
    .CreateGroupChatView {
        height: calc(100% - 46px);
        position: relative;
        .selectedUser {
            max-width: 150px;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
            .van-image {
                padding-left: 0.3125rem;
            }
        }
        .bottom {
            position: absolute;
            display: flex;
            justify-content: flex-end;
            bottom: 0;
            width: 100%;
            background-color: #ededed;
        }
    }
</style>
